<template>
  <div class="hello">
  <van-nav-bar title="视频播放" />
  <!-- 视频容器 -->
  <video :src="videopath" id="video-player" controls >
    <source  type="video/mp4">
  </video>
    <!-- 垃圾的分类一 -->
  <div class="waste">
    <van-cell title="" size="large" v-for="(item , index) in textimgimfo " :key="index"
  :label="item"/>
  </div>

  </div>
  <!-- </div> -->
</template>

<script>
import { getvideodata } from '../api/index'

// 使用辅助函数
import { mapState } from 'vuex'
export default {
  name: 'uservideo',
  data () {
    return {
      videopath: '',
      projectFiles: [], // 用于保存项目文件数组
      list: '',
      // 动态图片
      imageArray: [],
      myimagearray: []
      // imgs: require('../temp_file/16902632301860.png')
    }
  },
  mounted () {
    this.getvideodatafunction()
  },
  methods: {
    async getvideodatafunction () {
      const result = await getvideodata()
      this.videopath = result.data[0].path
    },
    // // // 判断是否有空格
    hasSpace (str) {
      return str.includes('temp_file')
    }
  },

  created () {
    // 在组件创建的时候获取项目信息
    // this.fetchProjectFiles()
    // this.addimage()
  },
  computed: {
    ...mapState(['textimgimfo'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.van-nav-bar {
  background: #007bff;
}

/* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
/deep/ .van-nav-bar__title {
  color: white;
}
#video-player {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.waste {
  padding: 5px 10px;
}
.wasteimg {
  text-align: center;
  // background-color: pink;
  padding: 20px 0;
}

</style>
